<script setup lang="ts">

</script>

<template>
  <div class="data-container">
    <div class="c1">统计项1</div>
    <div class="c2">统计项2</div>
    <div class="c3">统计项3</div>
    <div class="c4">统计项4</div>
  </div>
</template>

<style scoped>
.data-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px;
  height: 100vh;
}

.data-container > div {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  padding: 20px;
  aspect-ratio: 1; /* 保持正方形 */
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>